<template>
    <view class="content">
        <swiper class="swiper" :autoplay="autoplay" :duration="duration" :interval="interval" :circular="true">
            <swiper-item>
                <view class="swiper-item">
                    <view class="swiper-item-img text-class">
                        <text>快快乐乐吃饭</text>
                    </view>
                    <view class="swiper-item-img">
                        <image src="https://jzy-sup3-dev.oss-cn-shanghai.aliyuncs.com/chik/static/icon_01.png" mode="aspectFit"></image>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <view class="swiper-item-img text-class">
                        <text>健健康康成长</text>
                    </view>
                    <view class="swiper-item-img">
                        <image src="https://jzy-sup3-dev.oss-cn-shanghai.aliyuncs.com/chik/static/icon_02.png" mode="aspectFit"></image>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <view class="swiper-item-img text-class">
                        <text>每日推荐一品</text>
                    </view>
                    <view class="swiper-item-img">
                        <image src="https://jzy-sup3-dev.oss-cn-shanghai.aliyuncs.com/chik/static/icon_03.png" mode="aspectFit"></image>
                    </view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <view class="swiper-item-img text-class">
                        <text>助您呵护成长</text>
                    </view>
                    <view class="swiper-item-img">
                        <image src="https://jzy-sup3-dev.oss-cn-shanghai.aliyuncs.com/chik/static/icon_04.png" mode="aspectFit"></image>
                    </view>
                </view>
            </swiper-item>
        </swiper>

        <!-- <view class="jump-over" @tap="launchFlag()">{{jumpover}}</view> -->
        <view class="experience" @tap="launchFlag()">{{experience}}</view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: ['color1', 'color2', 'color3'],
                autoplay: true,
                duration: 1000,
                interval: 3000,
                jumpover: '跳过',
                experience: '立即体验'
            }
        },
        methods: {
            launchFlag: function() {
                /**
                 * 向本地存储中设置launchFlag的值，即启动标识；
                 */
                uni.setStorage({
                    key: 'launchFlag',
                    data: true,
                });
                uni.redirectTo({
                    url: '/pages/index/index'
                });
            }
        }
    }
</script>
<style>
    page,
    .content {
        width: 100%;
        height: 100%;
        background-size: 100% auto;
        padding: 0;
        background-color: #FFFFFF;
        margin-top: 50upx;
    }

    .swiper {
        margin-top: 200upx;
        width: 100%;
        height: 66%;
        background: #FFFFFF;
    }

    .swiper-item {
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;
        display: flex;
        align-items: flex-end;
        flex-direction: column-reverse
    }

    .swiper-item-img {
        width: 100%;
        /* height: auto; */
        height: 50%;
        margin: 0 auto;
        font-family: 'STXingkai';
        font-size: 80upx;
    }

    .swiper-item-img image {
        width: 80%;
    }
    
    .text-class {
        padding-top: 50px;
    }
    
    .uniapp-img {
        height: 20%;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .uniapp-img image {
        width: 40%;
    }

    .jump-over,
    .experience {
        margin: 0 auto;
        margin-bottom: 10upx;
        width: 220upx;
        height: 60upx;
        line-height: 60upx;
        padding: 0 40upx;
        border-radius: 30upx;
        font-size: 32upx;
        color: #454343;
        border: 1px solid #454343;
        z-index: 999;
        text-align: center;
    }

    .jump-over {
        right: 50%;
        display: block;
    }

    .experience {
        right: 50%;
        display: block;
    }
</style>
